<template>
  <div>
    <h2>基本信息</h2>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <p>订单编号：{{ orderInfo.order_number || '-' }}</p>
          <p>
            买家姓名：{{ orderInfo.user_name || '-' }}-{{
              orderInfo.mobile || '-'
            }}
          </p>
          <p>
            支付金额：{{ orderInfo.pay_amount || '0' }}
            <el-button
              type="text"
              @click="refund(orderInfo)"
              class="margin-left10"
              v-if="orderInfo.pay_amount"
              >退款</el-button
            >
          </p>
          <p>下单时间：{{ orderInfo.create_time || '-' }}</p>
        </div>
      </el-col>
      <el-col :span="6">
        <p>订单状态：{{ filterArr('status', orderInfo.status) }}</p>
        <p>订单金额：{{ orderInfo.order_amount }}</p>
        <p>付款时间：{{ orderInfo.pay_time || '-' }}</p>
      </el-col>
      <el-col :span="6">
        <p>
          优惠方式：{{ orderInfo.is_use_coupon == 1 ? 'S端学生免费' : '暂无' }}
        </p>
        <p>优惠金额：暂无</p>
        <p>申请退款时间： 暂无</p>
      </el-col>
      <el-col :span="6">
        <p>支付方式：{{ filterArr('pay_type', orderInfo.pay_type) }}支付</p>
        <p>退款金额：暂无</p>
        <p>退款时间：暂无</p>
      </el-col>
    </el-row>

    <br />
    <br />
    <h2>商品信息</h2>
    <el-table
      :data="goodsInfo"
      style="width: 100%"
      :show-header="false"
      header-cell-class-name="thead"
    >
      <el-table-column prop="date" label="图片信息" width="300">
        <template slot-scope="scope">
          <div>
            <img class="u-img-fm" :src="scope.row.goods_picture" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="其它信息">
        <template slot-scope="scope">
          <div>
            <b>商品名称：{{ scope.row.goods_name }}</b>
            <div v-for="(ele, indx) in scope.row.course_info">
              <span class="relate-course">关联课程：{{ ele.course_name }}</span>
              <span class="course-period">期次：{{ ele.period_sort }}期</span>
              <span>课时：{{ ele.lesson_sorts }}课时</span>
            </div>
            <p>
              商品数量：×{{ scope.row.quantity }}
              &nbsp;&nbsp;总价格：
              <b>¥{{ scope.row.goods_price }}</b>
            </p>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <br />
    <div v-if="type == 4">
      <h2>优惠信息</h2>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple coupon">
            <div class="u-coupon-base">
              <span class="fs14">￥</span>{{ preferential_info.discount_price }}
            </div>
            <div class="u-coupon-info">
              <b>
                预付{{ preferential_info.price }}抵扣{{
                  preferential_info.discount_price
                }}</b
              >
              <p class="c-999 fs12">
                {{ preferential_info.give_time }}至{{
                  preferential_info.expire_time
                }}
              </p>
              <p class="c-999 fs12">仅用于在线1对1课程使用</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <p>优惠金额：{{ preferential_info.discount_price }}元</p>
          <p>获取时间：{{ preferential_info.give_time }}</p>
        </el-col>
        <el-col :span="6">
          <p>
            优惠类型：{{
              filterArr('coupon_type', preferential_info.coupon_type) || '无'
            }}
          </p>
          <p>截止日期：{{ preferential_info.expire_time }}</p>
        </el-col>
        <el-col :span="4">
          <p>获取方式：购买</p>
        </el-col>
      </el-row>
      <br />
      <br />
    </div>
    <div v-if="type == 4 || type == 1">
      <h2>物流信息</h2>
      <el-row>
        <el-col :span="8">
          <br />
          <b>收货人：{{ logistics_info.receiving_name }}</b>
          <!-- <p class="bold">物流单号：12343245637</p> -->
        </el-col>
        <el-col :span="8">
          <p>联系方式：{{ logistics_info.receiving_mobile }}</p>
          <!-- <p>物流公司：韵达快递</p> -->
        </el-col>
        <el-col :span="8">
          <p>收货地址：{{ logistics_info.address }}</p>
          <!-- <b>物流状态：派件中</b> -->
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="退款"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="500px"
    >
      <el-form
        :model="refundForm"
        :rules="formRules"
        ref="refundForm"
        label-width="80px"
      >
        <el-form-item label="退款金额" prop="amount">
          <el-input
            v-model="refundForm.amount"
            :placeholder="`请输入退款金额,最多${orderInfo.pay_amount}元`"
            clearable
            type="number"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取消</el-button>
        <el-button
          type="primary"
          @click="dataFormSubmit"
          size="small"
          v-preventReClick
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { cascadeQuery, queyEnumByTableName } from '@/api/api.js'
import {
  activityCouponDetails,
  activityDetails,
  virtualGoodsDetails,
  refund
} from '@/api/order.js'
import { getActivityCouponResource } from '@/api/coupon.js'
export default {
  data () {
    const validateMoney = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入退款金额！'))
      } else if (
        value &&
        value.indexOf('.') != -1 &&
        value.split('.')[1].length > 2
      ) {
        callback(new Error('请输入最多两位小数的数字！'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      selectArr: { pay_type: [], status: [], coupon_type: [] },
      orderInfo: {},
      goodsInfo: [],
      logistics_info: {},
      preferential_info: {},
      refundForm: { amount: '' },
      formRules: {
        amount: [{ required: true, trigger: 'blur', validator: validateMoney }]
      },
      type: '' // 1：虚拟商品订单（默认）；2：实物商品订单；3：优惠券订单；4：活动商品订单
    }
  },
  activated () {
    this.getSelectData()
    this.type = this.$route.query.type
  },
  methods: {
    refund () {
      this.visible = true
      this.$refs.refundForm.resetFields()
    },
    dataFormSubmit () {
      this.$refs['refundForm'].validate(async valid => {
        if (valid) {
          let res = await refund({
            order_number: this.orderInfo.order_number,
            refundAmount: this.refundForm.amount
          })
          if (res[0]) {
            return
          }
          this.$message.success('退款成功！')
          this.visible = false
          this.getData()
        }
      })
    },
    // 下拉菜单过滤
    filterArr (field, val) {
      let arr = this.selectArr[field]
      let label
      arr.map(item => {
        if (parseInt(val) === parseInt(item.value)) {
          label = item.label
        }
        if (parseInt(val) === parseInt(item.real_value)) {
          label = item.label
        }
        if (item.children && item.children.length > 0) {
          item.children.map(item2 => {
            if (parseInt(val) === parseInt(item2.real_value)) {
              label = item.label
            }
          })
        }
      })
      return label
    },
    async getActivityCouponResource () {
      let res = await getActivityCouponResource({})
      if (res[0]) {
        return
      }
      let arr = res[1].data
      Object.keys(this.selectArr).forEach(item => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fieldName === item) {
            this.selectArr[item] = arr[i].sourceData.child
          }
        }
      })
      this.selectArr = JSON.parse(
        JSON.stringify(this.selectArr)
          .split('display_value')
          .join('label')
          .split('child')
          .join('children')
          .split('t_id')
          .join('value')
      )
      this.getData()
    },
    async getSelectData () {
      let res = await queyEnumByTableName({ tableName: 'nice_order' })
      if (res[0]) {
        return
      }
      let arr = res[1].data
      Object.keys(this.selectArr).forEach(item => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fieldName === item) {
            this.selectArr[item] = arr[i].child
          }
        }
      })
      this.selectArr = JSON.parse(
        JSON.stringify(this.selectArr)
          .split('display_value')
          .join('label')
          .split('child')
          .join('children')
          .split('t_id')
          .join('value')
      )
      if (this.type == 4) {
        this.getActivityCouponResource()
      } else {
        this.getData()
      }
    },
    // 获取订单基本信息
    async getData () {
      let res = await cascadeQuery({
        table_name: 'nice_order',
        condition: [{ id: [{ '=': this.$route.query.id }] }],
        member: 'user_name,mobile'
      })
      if (res[0]) {
        return
      }
      this.orderInfo = res[1].data[0]
      this.orderInfo.favorable_amount = parseFloat(
        this.orderInfo.order_amount - this.orderInfo.pay_amount
      )
      // 获取商品信息
      let res2 =
        this.type == 1
          ? await virtualGoodsDetails({ 'vo.order_id': this.$route.query.id })
          : this.type == 3
          ? await activityCouponDetails({ 'vo.order_id': this.$route.query.id })
          : await activityDetails({ 'vo.order_id': this.$route.query.id })
      if (res2[0]) {
        return
      }
      this.goodsInfo = res2[1].data.list
      if (this.goodsInfo && this.goodsInfo.length) {
        if (this.type == 4 || this.type == 1) {
          this.logistics_info = res2[1].data.logistics_info
            ? JSON.parse(res2[1].data.logistics_info)
            : {}
        }
        this.goodsInfo.forEach(ele => {
          ele.course_info = ele.course_info ? JSON.parse(ele.course_info) : []
        })
      }
      if (this.type == 4 && this.goodsInfo && this.goodsInfo.length) {
        this.preferential_info = this.goodsInfo[0].preferential_info
          ? JSON.parse(this.goodsInfo[0].preferential_info)
          : {}
        this.preferential_info.expire_time = this.preferential_info.expire_time.substring(
          0,
          10
        )
        this.preferential_info.give_time = this.preferential_info.give_time.substring(
          0,
          10
        )
      }
    }
  }
}
</script>
<style scoped>
.u-img-fm {
  width: 130px;
  height: 130px;
  object-fit: cover;
}
.bold {
  font-weight: bold;
}
.coupon {
  display: flex;
}
.relate-course {
  width: 400px;
  display: inline-block;
}
.course-period {
  width: 150px;
  display: inline-block;
  margin: 0px 10px;
}
.u-coupon-base {
  width: 100px;
  text-align: center;
  height: 100px;
  line-height: 100px;
  background: rgba(0, 0, 0, 0.1);
  margin-right: 2px;
  font-weight: bold;
  font-size: 32px;
}
.u-coupon-info {
  width: 200px;
  height: 100px;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  padding: 15px 0px;
}
.fs14 {
  font-size: 14px;
}
.fs12 {
  font-size: 12px;
}
.c-999 {
  color: #999;
}
.bg-grey {
  background: #efefef;
  padding: 0px 10px;
  margin-bottom: 20px;
}
</style>
